// tailwind.config.js
// eslint-disable-next-line no-undef

const unit = 'rpx'

const getPxRange = (min, max, step = 1, u = unit) => {
  const obj = {}
  for (let i = min; i <= max; i += step) {
    obj[i] = u ? `${i}${u}` : i
  }
  return obj
}

const getGrayRange = (min, max, step = 1) => {
  const obj = {}
  for (let i = min; i <= max; i += step) {
    obj[i] = `#${i}${i}${i}${i}${i}${i}`
  }
  return obj
}

// eslint-disable-next-line no-undef
module.exports = {
  content: ['./src/**/*.{html,js,ts,jsx,tsx,vue}'],
  theme: {
    colors: {
      brand: {
        0: '#6e6ff6', // 主题色
        1: '#766DDB', // 评论昵称颜色
        2: 'rgba(227, 226, 247, 0.3)' // 页面背景色
      },
      gray: {
        ...getGrayRange(0, 9),
        10: '#B4B4B4',
        11: '#FAFAFA'
      },
      white: '#ffffff',
      black: '#000000',
      pageBg: '#f8f8f8',
      frame: '#eeeeee'
    },
    keyframes: {
      screwdriver: {
        '0%': { bottom: 0 },
        '100%': { bottom: '94px' }
      }
    },
    animation: {
      toast: 'screwdriver 0.5s ease-in-out forwards'
    },
    spacing: getPxRange(0, 1000),
    margin: ({ theme }) => ({
      auto: 'auto',
      ...theme('spacing')
    }),
    padding: ({ theme }) => ({
      safe: 'env(safe-area-inset-bottom)',
      ...theme('spacing')
    }),
    height: ({ theme }) => ({
      screen: '100vh',
      full: '100%',
      auto: 'auto',
      ...theme('spacing')
    }),
    width: ({ theme }) => ({
      screen: '100vw',
      full: '100%',
      auto: 'auto',
      ...theme('spacing')
    }),
    minHeight: ({ theme }) => ({
      screen: '100vh',
      full: '100%',
      auto: 'auto',
      ...theme('spacing')
    }),
    minWidth: ({ theme }) => ({
      screen: '100vw',
      full: '100%',
      auto: 'auto',
      ...theme('spacing')
    }),
    maxWidth: ({ theme }) => ({
      screen: '100vw',
      full: '100%',
      auto: 'auto',
      ...theme('spacing')
    }),
    maxHeight: ({ theme }) => ({
      screen: '100vw',
      full: '100%',
      auto: 'auto',
      ...theme('spacing')
    }),
    borderRadius: {
      full: '100%',
      ...getPxRange(0, 200)
    },
    fontSize: getPxRange(10, 80),
    lineHeight: {
      none: 1,
      ...getPxRange(1, 300)
    },
    borderWidth: {
      3: '3px',
      ...getPxRange(0, 50)
    },
    zIndex: {
      auto: 'auto',
      ...getPxRange(0, 1000, 100, false)
    },
    gap: getPxRange(0, 100)
  },
  plugins: [],
  corePlugins: {
    preflight: false,
    inset: true,
    zIndex: true,
    gridAutoColumns: true,
    gridAutoRows: true,
    gridAutoFlow: true,
    gridColumn: true,
    gridColumnEnd: true,
    gridColumnStart: true,
    gridRow: true,
    gridRowEnd: true,
    gridRowStart: true,
    gridTemplateColumns: true,
    gridTemplateRows: true,
    gap: true,
    translate: true
  },
  important: false
}
